import React, { Component } from 'react';
import {Popup} from 'antd-mobile'
import common from '../../utils/common'

import style from './PassItem.scss'

class PassItem extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }

		componentWillMount(){

		}

    toUrl(url) {
        this.context.router.push(url);
    }

    render() {
        let res = this.props.res,
            fmt = 'yyyy-MM-dd',
            validateEnd  = common.format(res.validateEnd,fmt),  //有效期时间
	        birthday = common.format(res.birthday,fmt); //生日时间
	    return (
            <div className={style.passItem}>
                <div  className={style.passBox} onClick={()=>{this.toUrl(`addPass/${res.id}/disabled`)}}
                style={this.props.currentIndex == this.props.index?{borderColor: '#00B488'}:{}}>
			            {this.props.currentIndex == this.props.index?<img className={style.checkState} src="./images/check.png" alt=""/>:''}
                    <img className={style.toArrow} src="./images/icon_r.png" alt=""/>
                    <div className={style.information}>
                        <span>{res.passName}</span>
                        <span>{res.passCode}</span>
                    </div>
                    <div className={style.timeBox}>
                        <div>
                            <span>有效期至：</span>
                            <span>{validateEnd}</span>
                        </div>
                        <div className={style.birthDate}>
                            <span>出生日期：</span>
                            <span>{birthday}</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

//使用context
PassItem.contextTypes = {
	router: React.PropTypes.object.isRequired
};

export default PassItem